import React, { useState, useImperativeHandle, useEffect } from 'react';
import { Collapse, Table, Tooltip, Icon, Input } from 'antd';
import { connect } from 'react-redux';
import { differenceBy } from 'lodash';

const Panel = Collapse.Panel;

function PrepositionFrom(props) {
  const { value } = props;
  const [preposition, setPrePosition] = useState([]);
  useEffect(() => {
    let newArr = [];
    let obj = {};
    for (var i = 0; i < value.length; i++) {
      if (!obj[value[i].category]) {
        newArr.push(value[i]);
        obj[value[i].category] = true;
      }
    }
    console.log(newArr);
    setPrePosition(newArr);
  }, [value]);
  return (
    <Collapse expandIcon={({ isActive }) => (isActive ? <Icon type='minus' /> : <Icon type='plus' />)}>
      {preposition.map((it) => {
        return (
          <Panel header={it.categoryName} key={it.category}>
            <>
              <Collapse expandIcon={({ isActive }) => (isActive ? <Icon type='minus' /> : <Icon type='plus' />)}>
                {value.map((item) => {
                  if (item.category === it.category) {
                    return <Panel header={item.name} key={item.code} disabled />;
                  } else {
                    return;
                  }
                })}
              </Collapse>
            </>
          </Panel>
        );
      })}
    </Collapse>
  );
}

function mapStateToProps(state) {
  return {
    fieldClassification: state.code.field_classification || [],
  };
}

export default connect(mapStateToProps)(PrepositionFrom);
